<html xmlns:th="http://www.thymeleaf.org">
<style>
    .layui-form-item .layui-input-inline{
        width: 500px;
    }
</style>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend th:text="${role == null}?'角色录入':'编辑角色'"></legend>
</fieldset>

<form class="layui-form" action="return false" lay-filter="formUpdate">

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">角色名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" lay-verify="required|menuname" autocomplete="off" placeholder="请输入角色名" class="layui-input" />
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">菜单</label>
        <div class="layui-input-block">
            <input type="checkbox" name="like[write]" title="写作"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <label class="layui-form-label"></label>
        <div class="layui-input-block">
            <input type="checkbox" name="like[write]" title="写作"/>
            <input type="checkbox" name="like[read]" title="阅读" checked=""/>
            <input type="checkbox" name="like[game]" title="游戏"/>
        </div>
    </div>



    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="menu">立即提交</button>
        </div>
    </div>
</form>

<div class="layui-collapse" lay-accordion="">
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">文豪</h2>
        <div class="layui-colla-content layui-show">

            <div class="layui-collapse" lay-accordion="">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">唐代</h2>
                    <div class="layui-colla-content layui-show">

                        <div class="layui-collapse" lay-accordion="">
                            <div class="layui-colla-item">
                                <h2 class="layui-colla-title">杜甫</h2>
                                <div class="layui-colla-content layui-show">
                                    伟大的诗人
                                </div>
                            </div>
                            <div class="layui-colla-item">
                                <h2 class="layui-colla-title">李白</h2>
                                <div class="layui-colla-content">
                                    <p>据说是韩国人</p>
                                </div>
                            </div>
                            <div class="layui-colla-item">
                                <h2 class="layui-colla-title">王勃</h2>
                                <div class="layui-colla-content">
                                    <p>千古绝唱《滕王阁序》</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">宋代</h2>
                    <div class="layui-colla-content">
                        <p>比如苏轼、李清照</p>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>
<script th:inline="javascript">
    /* <![CDATA[*/
    layui.use(['tree','form', 'layedit', 'laydate','element'], function(){
        var form = layui.form;
        var layer = layui.layer;
        var layedit = layui.layedit;
        var laydate = layui.laydate;
        var element=layui.element;


        //自定义验证规则
        form.verify({
            name:[/^[\S]{1,9}$/,'角色名称长度1-9个字']
        });
        var role=/*[[ ${role} ]]*/;
        var url = /*[[ ${#httpServletRequest.getContextPath()+'/admin/role/addRole'} ]]*/
        if(role){
            form.val("formUpdate", {
                "name": role.name // "name": "value"
            })
            url = /*[[ ${#httpServletRequest.getContextPath()+'/admin/role/editRole'} ]]*/
        }
        //监听提交
        form.on('submit(menu)', function(data){
            if(role){
                data.field.id=role.id;
                if(data.field.name==$.trim(role.name)){
                    layer.alert('名称未修改', {icon: 2});
                    return false;
                }
            }
            ajaxUtil(url,data.field,function(){
                layer.confirm('操作成功，是否返回列表页面？', {
                    btn: ['确定', '取消']
                }, function(index, layero){
                    layer.close(index);
                    openwindows(/*[[${#httpServletRequest.getContextPath()+'/admin/role/list'}]]*/,null,$)
                }, function(index){
                    layer.close(index);
                });
            });
            return false;
        });

        form.render();
    });
    /* ]]> */
</script>
</html>